import {  Upload, message } from 'antd';
import React from "react";
import {ossConfig} from "@/services/ant-design-pro/users";

export default class Aliyun extends React.Component {
  state = {
    OSSData: {},
  };

  /**
   * 组件挂载完成以后，进行初始化，获取OSS配置
   * @returns {Promise<void>}
   */
  async componentDidMount() {
    await this.init();
  }

  /**
   * 初始化数据，获取OSS上传签名
   *
   * @returns {Promise<void>}
   */
  init = async () => {
    try {
      const OSSData = await ossConfig();

      this.setState({
        OSSData,
      });
    } catch (error) {
      message.error(error);
    }
  };

  /**
   * 文件上传过程中触发的回调函数，直到上传完成
   * @param file
   */
  onChange = ( { file } ) => {
    if (file.status === 'done') {
      const {setCoverKey,insertImage} = this.props;
      // 文件上传成功后，把文件的key，设置为表单某个字段的值
      // 做一个判断，如果有这个方法的使用，才会使用这个表单的key，否则直接弹出消息提醒
      if (setCoverKey) setCoverKey(file.key);
      // 上传完成后，如果要URL，将URL返回给父组件
      if (insertImage) insertImage(file.url)
      message.success('上传成功！')
    }
  };

  /**
   * 额外的上传参数，在上传的时候显示的图片参数
   * @param file
   * @returns {{OSSAccessKeyId: *, Signature: *, key, policy: *}}
   */
  getExtraData = file => {
    const { OSSData } = this.state;
    return {
      key: file.key,
      OSSAccessKeyId: OSSData.accessid,
      policy: OSSData.policy,
      Signature: OSSData.signature,
    };
  };

  /**
   * 选择文件之后，上传文件之前，执行回调
   *
   * @param file
   * @returns {Promise<*>}
   */
  beforeUpload = async file => {
    const { OSSData } = this.state;
    const expire = OSSData.expire * 1000;

    // 如果签名过期了，重新获取
    if (expire < Date.now()) {
      await this.init();
    }
    // 文件名的key不能是/开头的
    const dir = 'react/';  // 自己定义的上传目录
    const suffix = file.name.slice(file.name.lastIndexOf('.'));
    const filename = Date.now() + suffix;

    // 在getExtraData函数中会用到，在云存储中存储的文件的key
    file.key = OSSData.dir + dir + filename ;

    // 返回浏览器的是域名加上服务器的目录加上自己定义的目录加上文件名，用于上传完成以后显示的内容
    file.url = OSSData.host + OSSData.dir + dir + filename;

    return file;
  };

  render() {
    const { value, accept,showUploadList} = this.props;
    const props = {
      accept: accept || '',
      name: 'file',
      fileList: value,
      action: this.state.OSSData.host,
      onChange: this.onChange,
      data: this.getExtraData,
      beforeUpload: this.beforeUpload,
      listType:'picture',
      maxCount:1,
      showUploadList
    };
    return (
      <Upload {...props}>
        {this.props.children}
      </Upload>
    );
  }
}

